<template>
  <div>
    <el-card class="box-card">
      <!-- 用户名 -->
      <div class="text item">
        <div>
          <span>用&ensp;户&ensp;名</span> ：{{ store.state.globalUsername }}
        </div>
        <CenterBtn @click='ShowDialog'>修改</CenterBtn>
      </div>
      <!-- 类型 -->
      <div class="text item">
        <div>
          <span>类&emsp;&emsp;型</span> ：{{ adminMessage.type === '1' ? '超级管理员' : '普通管理员' }}
        </div>
        <CenterBtn @click="open('类型', adminMessage.type === '1' ? '超级管理员' : '普通管理员')">查看</CenterBtn>
      </div>
      <!-- 创建时间 -->
      <div class="text item">
        <div>
          <span>创建时间</span> ：{{ dayjs(adminMessage.createTime).format('YYYY-MM-DD HH:mm:ss') }}
        </div>
        <CenterBtn @click="open('创建时间', adminMessage.createTime)">查看</CenterBtn>
      </div>
      <!-- 所属id -->
      <div class="text item">
        <div>
          <span>所&ensp;属&ensp;id</span> ：{{ adminMessage._id }}
        </div>
        <CenterBtn @click="open('ID', adminMessage._id)">查看</CenterBtn>
      </div>
      <!-- 头像 -->
      <div class="text item" v-if="adminMessage.avatar">
        <div class="itemAvatar">
          <span>头&emsp;&emsp;像:</span>
          <div>
            <el-avatar :src="store.state.BaseUrl + store.state.globalAvatarUrl" :size="50"></el-avatar>
          </div>
        </div>
        <!-- 修改头像 -->
        <el-upload class="avatar-uploader" action="/" :show-file-list="false" :http-request='handleUpdateAvatar'>
          <CenterBtn>修改</CenterBtn>
        </el-upload>
      </div>
    </el-card>
    <!-- 显示对话框 -->
    <el-dialog v-model="dialogVisible" title="修改名字" width="25%" draggable>
      <div>
        <input placeholder="username" type="text" class="input" v-model="uservalue">
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="usernameChange">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { inject, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import { changeUsername, getAdminMessage, changeAvatar } from '@/utils/adminHttp'

import CenterBtn from '../button/CenterBtn.vue'
const store: any = inject('store')

const uservalue = ref('')
// 现实对话框 
const dialogVisible = ref(false)

const ShowDialog = function () {
  dialogVisible.value = true
}
// 修改用户名
const usernameChange = function () {
  const reg = /^.{2,8}$/
  if (!reg.test(uservalue.value)) return ElMessage.error('不能为空必须是2-8位')
  dialogVisible.value = false
  // 发送请求 
  changeUsername(uservalue.value).then(res => {
    uservalue.value = ''
    if (res.data.ok) {
      store.ChangeUsername(res.data.username)
      ElMessage({
        showClose: true,
        message: res.data.info,
        type: 'success',
      })
    } else {
      ElMessage.error(res.data.info)
    }
  }).catch(err => ElMessage.error('检查是否token过期有可能是服务器错误'))
}
// 上来获取登录者的adminMessage基本信息
interface adminMessage { [porps: string]: any }
const adminMessage = ref({} as adminMessage)
getAdminMessage().then(res => {
  adminMessage.value = res.data
})

// 打开
const open = (title: string, info: string) => {
  ElMessageBox.alert(info, title, {
    confirmButtonText: 'OK',
    callback: () => { },
  })
}
// 修改头像
const handleUpdateAvatar = function (file: any) {
  changeAvatar(file.file, store.state.globalAvatarUrl.split('/')[1]).then(res => {
    store.ChangeAvatar(res.data.avatar)
    if (res.data.ok) {
      ElMessage({
        showClose: true,
        message: res.data.info,
        type: 'success',
      })
    } else {
      ElMessage.error(res.data.info)
    }
  }).catch(err => ElMessage.error('服务器错误 你可以检查一下你的token'))
}
</script>

<style  lang="scss">
.item {
  .el-upload {
    margin-top: 15px;
  }
}
</style>
<style lang="scss" scoped>
.box-card {
  width: 60%;
  max-width: 650px;
  margin: 30px auto;

  .text {
    font-size: 14px;
  }

  .item {
    position: relative;
    display: flex;
    padding: 18px 10px;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;

    .itemAvatar {
      display: flex;
      align-items: center;

      span {
        margin-right: 20px;
      }
    }
  }
}

/* From uiverse.io by @alexruix */
.input {
  width: 100%;
  line-height: 28px;
  border: 2px solid transparent;
  border-bottom-color: #777;
  padding: .2rem 0;
  outline: none;
  background-color: transparent;
  color: #0d0c22;
  transition: .3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.input:focus,
input:hover {
  outline: none;
  padding: .2rem 1rem;
  border-radius: 1rem;
  border-color: #7a9cc6;
}

.input::placeholder {
  color: #777;
}

.input:focus::placeholder {
  opacity: 0;
  transition: opacity .3s;
}
</style>